<template>
  <div>
    <BasicModal
      v-model:visible="visible"
      title="用户签约管理"
      :okButtonProps="{ disabled: !server }"
      @ok="onOk"
      v-bind="$attrs"
    >
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="onOk">提交</a-button>
      </template>
      <a-form
        ref="formRef"
        layout="vertical"
        name="form_in_modal"
        :model="formModel"
        :rules="formRules"
      >
        <a-form-item label="服务器" has-feedback name="server">
          <a-space>
            <a-select
              v-model:value="formModel.server"
              style="width: 150px"
              placeholder="选择服务器"
            >
              <a-select-option value="172.28.158.98">172.28.158.98 </a-select-option>
              <a-select-option value="172.28.158.99">172.28.158.99</a-select-option>
              <a-select-option value="172.28.158.130">172.28.158.130</a-select-option>
            </a-select>
          </a-space>
        </a-form-item>
        <a-form-item label="操作类型" has-feedback name="type">
          <a-space>
            <a-select
              v-model:value="formModel.type"
              style="width: 150px"
              placeholder="选择操作类型"
            >
              <a-select-option value="1">启动 </a-select-option>
              <a-select-option value="0">关闭</a-select-option>
            </a-select>
          </a-space>
        </a-form-item>
      </a-form>
    </BasicModal>
  </div>
</template>

<script setup>
  import { message } from 'ant-design-vue'
  import { ref } from 'vue'
  import { BasicModal } from '/@/components/Modal'
  import { startUserContractApi } from '/@/api/console/coreNetWork'
  const formModel = ref({ server: null, type: null })
  const formRef = ref()
  const visible = ref(false)
  const loading = ref(false)

  const handleCancel = () => {
    visible.value = false
  }

  const validateServer = async (_rule, value) => {
    if (!value) {
      return Promise.reject('请选择服务器！')
    } else {
      return Promise.resolve()
    }
  }
  const validateType = async (_rule, value) => {
    if (!value) {
      return Promise.reject('请选择操作类型！')
    } else {
      return Promise.resolve()
    }
  }
  const formRules = {
    server: [
      { required: true, message: '请选择服务器！', trigger: 'change', validator: validateServer },
    ],
    type: [
      { required: true, message: '请选择操作类型！', trigger: 'change', validator: validateType },
    ],
  }

  const onOk = async () => {
    loading.value = true
    try {
      await formRef.value.validate()
      // 服务端返回的结果中result为空，因此不需要返回值
      await startUserContractApi({ server: formModel.value.server, type: formModel.value.type })
      loading.value = false
      handleCancel()
      message.success('操作成功')
    } catch (error) {
      loading.value = false
    }
  }

  const showModal = () => {
    visible.value = true
  }

  defineExpose({
    showModal,
  })
</script>

<style>
  .collection-create-form_last-form-item {
    margin-bottom: 0;
  }
</style>
